<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <!-- <script src="ut/lib/canteen.js"></script> -->
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
</style>

<h1>Bar/Line chart stack normal with dataZoom in the toolbox(should not exceed the range of coord)</h1>
<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
<div id="main4"></div>
<div id="main5"></div>
<div id="main6"></div>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {

            top: '30%',

            title: {
                text: 'ECharts test'
            },
            tooltip: {},
            legend: {
                data: ['test']
            },
            xAxis: {
                data: ["AA", "BB", "CC", "DD", "EE", "FF"]
            },
            yAxis: {},
            series: [{
                name: 'Y',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                stack: 1,
            }, {
                name: 'X',
                type: 'bar',
                data: [1, 2, 30, 10, 8, 2],
                stack: 1,
            }],
            toolbox: {
                feature: {
                    dataZoom: {show: true}
                }
            }
        };

        var chart = testHelper.create(echarts, 'main0', {
            option: option,
            // recordCanvas: true
        });
    });

</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            "backgroundColor": "#fff",
            "legend": {
                "orient": "horizontal",
                "x": "center",
                "left": "2%",
                "top": "2%"
            },
            "textStyle": {
                "fontFamily": "Lato"
            },
            "tooltip": {
                "show": true,
                "trigger": "axis",
                "backgroundColor": "#fff",
                "borderColor": "#e0e5ec",
                "borderWidth": 1,
                "textStyle": {
                    "color": "#495057",
                    "fontSize": 10
                },
                "enterable": true,
                "axisPointer": {
                    "lineStyle": {
                        "color": "#e0e5ec"
                    }
                }
            },
            "toolbox": {
                "feature": {
                    "dataZoom": {
                        "show": true,
                        "title": {
                            "zoom": "Zoom",
                            "back": "Restore Zoom"
                        }
                    }
                }
            },
            "color": [
                "rgba(101,116, 205, 0.9 )",
                "rgba(246,109, 155, 0.9 )",
                "rgba(43,203, 186, 0.9 )",
                "rgba(253,150, 68, 0.9 )",
                "rgba(205,32, 31, 0.9 )",
                "rgba(165,94, 234, 0.9 )",
                "rgba(123,210, 53, 0.9 )",
                "rgba(241,196, 15, 0.9 )",
                "rgba(70,127, 207, 0.9 )",
                "rgba(23,162, 184, 0.9 )",
                "rgba(69,170, 242, 0.9 )",
                "rgba(94,186, 0, 0.9 )",
                "rgba(33,150, 243, 0.9 )",
                "rgba(0,150, 136, 0.9 )",
                "rgba(244,67, 54, 0.9 )",
                "rgba(156,39, 176, 0.9 )",
                "rgba(0,150, 136, 0.9 )",
                "rgba(103,58, 183, 0.9 )",
                "rgba(63,81, 181, 0.9 )",
                "rgba(76,175, 80, 0.9 )",
                "rgba(233,30, 99, 0.9 )",
                "rgba(96,125, 139, 0.9 )",
                "rgba(255,87, 34, 0.9 )",
                "rgba(28,147, 99, 0.9 )",
                "rgba(255,113, 91, 0.9 )",
                "rgba(43,89, 195, 0.9 )",
                "rgba(33,91, 86, 0.9 )",
                "rgba(0,188, 212, 0.9 )",
                "rgba(255,87, 34, 0.9 )",
                "rgba(255,193, 7, 0.9 )",
                "rgba(48,25, 102, 0.9 )",
                "rgba(211,101, 130, 0.9 )",
                "rgba(130,6, 70, 0.9 )",
                "rgba(100,155, 193, 0.9 )",
                "rgba(75,63, 114, 0.9 )",
                "rgba(219,51, 64, 0.9 )",
                "rgba(223,81, 76, 0.9 )",
                "rgba(92,45, 80, 0.9 )",
                "rgba(94,52, 72, 0.9 )",
                "rgba(83,187, 244, 0.9 )",
                "rgba(89,196, 197, 0.9 )",
                "rgba(191,240, 115, 0.9 )",
                "rgba(228,95, 86, 0.9 )",
                "rgba(201,27, 38, 0.9 )",
                "rgba(115,116, 149, 0.9 )",
                "rgba(92,45, 80, 0.9 )",
                "rgba(32,69, 124, 0.9 )",
                "rgba(15,89, 89, 0.9 )",
                "rgba(159,146, 170, 0.9 )",
                "rgba(255,162, 0, 0.9 )",
                "rgba(36,168, 172, 0.9 )",
                "rgba(255,76, 101, 0.9 )",
                "rgba(233,76, 111, 0.9 )",
                "rgba(53,68, 88, 0.9 )",
                "rgba(105,210, 231, 0.9 )",
                "rgba(220,39, 66, 0.9 )",
                "rgba(58,2, 86, 0.9 )",
                "rgba(23,166, 151, 0.9 )",
                "rgba(6,71, 137, 0.9 )",
                "rgba(255,195, 60, 0.9 )"
            ],
            "xAxis": {
                "show": true,
                "type": "category",
                "name": "Inserted_at By Day",
                "nameLocation": "center",
                "nameTextStyle": {
                    "padding": 8,
                    "color": "#495057",
                    "fontSize": 12
                },
                "axisLine": {
                    "onZero": false,
                    "lineStyle": {
                        "color": "#e0e5ec"
                    }
                },
                "axisLabel": {
                    "color": "#495057",
                    "fontSize": 10
                },
                "splitLine": {
                    "show": false
                }
            },
            "yAxis": {
                "show": true,
                "type": "value",
                "name": false,
                "nameLocation": "center",
                "nameTextStyle": {
                    "padding": 8,
                    "color": "#495057",
                    "fontSize": 12
                },
                "axisLine": {
                    "onZero": false,
                    "lineStyle": {
                        "color": "#e0e5ec"
                    }
                },
                "axisLabel": {
                    "color": "#495057",
                    "fontSize": 10
                },
                "splitLine": {
                    "show": false
                }
            },
            "series": [
                {
                    "type": "bar",
                    "name": "count",
                    "itemStyle": null,
                    "stack": true,
                    "data": [
                        [
                            "2018-03-08 05:30:00.000",
                            156
                        ],
                        [
                            "2018-03-23 05:30:00.000",
                            24
                        ],
                        [
                            "2018-04-18 05:30:00.000",
                            513
                        ],
                        [
                            "2018-05-16 05:30:00.000",
                            7
                        ],
                        [
                            "2018-05-20 05:30:00.000",
                            21
                        ],
                        [
                            "2018-05-31 05:30:00.000",
                            7
                        ],
                        [
                            "2018-06-07 05:30:00.000",
                            7
                        ],
                        [
                            "2018-06-08 05:30:00.000",
                            2
                        ],
                        [
                            "2018-06-10 05:30:00.000",
                            6
                        ]
                    ]
                },
                {
                    "type": "bar",
                    "name": "?column?",
                    "itemStyle": null,
                    "stack": true,
                    "data": [
                        [
                            "2018-03-08 05:30:00.000",
                            9
                        ],
                        [
                            "2018-03-23 05:30:00.000",
                            "1"
                        ],
                        [
                            "2018-04-18 05:30:00.000",
                            356
                        ],
                        [
                            "2018-05-16 05:30:00.000",
                            5
                        ],
                        [
                            "2018-05-20 05:30:00.000",
                            15
                        ],
                        [
                            "2018-05-31 05:30:00.000",
                            5
                        ],
                        [
                            "2018-06-07 05:30:00.000",
                            5
                        ],
                        [
                            "2018-06-08 05:30:00.000",
                            "1"
                        ],
                        [
                            "2018-06-10 05:30:00.000",
                            4
                        ]
                    ]
                }
            ]
        };

        var chart = testHelper.create(echarts, 'main1', {
            option: option,
            // recordCanvas: true
        });
    });

</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            "calculable": false,
            "renderAsImage": false,
            "series": [
                {
                    "largeThreshold": 2000,
                    "legendHoverLink": true,
                    "smooth": false,
                    "barCategoryGap": "30%",
                    "clickable": true,
                    "z": 2,
                    "dataFilter": "nearest",
                    "showAllSymbol": false,
                    "yAxisIndex": 0,
                    "type": "bar",
                    "data": [
                        23756.529999999999,
                        26716.48,
                        9424.25,
                        9530.8999999999996,
                        6035.3400000000001,
                        0,
                        3381.3499999999999,
                        6528.8599999999997,
                        3760.21,
                        3502.3800000000001,
                        1194.3599999999999,
                        4612.3400000000001,
                        0,
                        1296.3800000000001,
                        3743.4499999999998,
                        26284.240000000002,
                        1809.24,
                        0,
                        1947.3199999999999,
                        2511,
                        15559.23,
                        0,
                        5936.9399999999996,
                        0,
                        0,
                        0,
                        4760.2700000000004,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        3428.1500000000001,
                        2521.0999999999999,
                        1607.8599999999999,
                        2441.52,
                        4354.8100000000004,
                        2960.9899999999998,
                        10408.42,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0
                    ],
                    "barGap": "30%",
                    "itemStyle": {
                        "emphasis": {
                            "color": "#1886E3",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        },
                        "normal": {
                            "color": "#1886E3",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        }
                    },
                    "large": false,
                    "name": "51周平均日用量"
                },
                {
                    "largeThreshold": 2000,
                    "legendHoverLink": true,
                    "smooth": false,
                    "barCategoryGap": "30%",
                    "clickable": true,
                    "z": 2,
                    "dataFilter": "nearest",
                    "showAllSymbol": false,
                    "yAxisIndex": 0,
                    "type": "bar",
                    "data": [
                        30489.049999999999,
                        36026.639999999999,
                        8183.5699999999997,
                        14145.48,
                        7167.7200000000003,
                        880.82000000000005,
                        6253.9200000000001,
                        8826.25,
                        4777.7399999999998,
                        3638.1700000000001,
                        3584.2800000000002,
                        5062.5,
                        1168.51,
                        1114.8299999999999,
                        11842.41,
                        30060.919999999998,
                        706.26999999999998,
                        3996.46,
                        4380.8100000000004,
                        5187.4099999999999,
                        3824.5999999999999,
                        2262.4499999999998,
                        2967.6999999999998,
                        4495.6300000000001,
                        4126.5699999999997,
                        0,
                        3858.75,
                        2924.0999999999999,
                        1746.75,
                        1975.5,
                        2082,
                        3088.5,
                        0,
                        0,
                        0,
                        1785.53,
                        4356.0100000000002,
                        8033.8199999999997,
                        4208.71,
                        13157.700000000001,
                        12462.93,
                        13743.9,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0
                    ],
                    "barGap": "30%",
                    "itemStyle": {
                        "emphasis": {
                            "color": "#F6A623",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        },
                        "normal": {
                            "color": "#F6A623",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        }
                    },
                    "large": false,
                    "name": "52周平均日用量"
                },
                {
                    "largeThreshold": 2000,
                    "legendHoverLink": true,
                    "smooth": false,
                    "barCategoryGap": "30%",
                    "clickable": true,
                    "z": 2,
                    "dataFilter": "nearest",
                    "showAllSymbol": false,
                    "yAxisIndex": 0,
                    "type": "bar",
                    "data": [
                        29524.110000000001,
                        14007.120000000001,
                        8411.6900000000005,
                        10003.469999999999,
                        11589.879999999999,
                        896.50999999999999,
                        4791.6000000000004,
                        6617.21,
                        7026.1099999999997,
                        5556.4899999999998,
                        3061.27,
                        8506.9099999999999,
                        416.82999999999998,
                        1337.75,
                        12256.059999999999,
                        22903.669999999998,
                        1427.8,
                        1533.5699999999999,
                        27902.540000000001,
                        5579.8100000000004,
                        28220.360000000001,
                        754.44000000000005,
                        3196.9299999999998,
                        6200.3400000000001,
                        6716.3900000000003,
                        0,
                        939.21000000000004,
                        803.39999999999998,
                        0,
                        11446.959999999999,
                        2096.5599999999999,
                        4544.4799999999996,
                        3509.3200000000002,
                        0,
                        761.25,
                        4916.1400000000003,
                        3039.4000000000001,
                        6166.8000000000002,
                        3378.46,
                        8787.6399999999994,
                        5666.96,
                        12500.610000000001,
                        5281.7299999999996,
                        8854.1399999999994,
                        328.94999999999999,
                        0,
                        0,
                        0,
                        0
                    ],
                    "barGap": "30%",
                    "itemStyle": {
                        "emphasis": {
                            "color": "#90AFE4",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        },
                        "normal": {
                            "color": "#90AFE4",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        }
                    },
                    "large": false,
                    "name": "1周平均日用量"
                },
                {
                    "largeThreshold": 2000,
                    "legendHoverLink": true,
                    "smooth": false,
                    "barCategoryGap": "30%",
                    "clickable": true,
                    "z": 2,
                    "dataFilter": "nearest",
                    "showAllSymbol": false,
                    "yAxisIndex": 0,
                    "type": "bar",
                    "data": [
                        35376.440000000002,
                        21978.869999999999,
                        6576.0299999999997,
                        8786.5499999999993,
                        10064.26,
                        2063.1399999999999,
                        6502.3400000000001,
                        13495.48,
                        5614.5100000000002,
                        6085.6499999999996,
                        2312.5799999999999,
                        8553.2600000000002,
                        8796.3999999999996,
                        1880.26,
                        8418.7900000000009,
                        49651.620000000003,
                        1466.8,
                        6279.8599999999997,
                        7088.9499999999998,
                        8273.3099999999995,
                        12138.690000000001,
                        7607.8699999999999,
                        5459.1599999999999,
                        4296.71,
                        5477.7399999999998,
                        1249.6300000000001,
                        5644.4700000000003,
                        1487.8099999999999,
                        2465.04,
                        6923.5200000000004,
                        5541.7799999999997,
                        2260.6999999999998,
                        2172.1500000000001,
                        1944,
                        8513.8600000000006,
                        10300.84,
                        2953.7600000000002,
                        10124.91,
                        12560.67,
                        7698.3199999999997,
                        9854.2099999999991,
                        11715.85,
                        3042.8299999999999,
                        11900.15,
                        19656.810000000001,
                        2519.0900000000001,
                        3384.0500000000002,
                        1441.74,
                        690.61000000000001
                    ],
                    "barGap": "30%",
                    "itemStyle": {
                        "emphasis": {
                            "color": "#6ED4DA",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        },
                        "normal": {
                            "color": "#6ED4DA",
                            "label": {
                                "distance": 10,
                                "show": false,
                                "position": "outer",
                                "rotate": false
                            },
                            "labelLine": {
                                "show": true,
                                "lineStyle": {
                                    "type": "solid"
                                },
                                "length": 40
                            }
                        }
                    },
                    "large": false,
                    "name": "2周平均日用量"
                }
            ],
            "grid": {
                "y": 75,
                "x2": 45,
                "z": 0,
                "x": 45,
                "zlevel": 0,
                "y2": 40
            },
            "xAxis": [
                {
                    "splitLine": {
                        "show": true,
                        "onGap": false,
                        "lineStyle": {
                            "type": "solid"
                        }
                    },
                    "scale": false,
                    "position": "'bottom'|'left'",
                    "axisLabel": {
                        "interval": "auto",
                        "show": true,
                        "clickable": false,
                        "rotate": 0,
                        "margin": 8
                    },
                    "show": true,
                    "z": 0,
                    "type": "category",
                    "data": [
                        "小华1号普通A+C",
                        "小华2号A+C两层加硬",
                        "小华3号170gA+B",
                        "小华4号170gA+A",
                        "小华5号（美牛双加硬）",
                        "10号（Q636B）\/BE瓦",
                        "11号（H737B）\/BC瓦",
                        "12号（H737H）\/BC瓦",
                        "13号（H636B）\/BC瓦",
                        "14号（M535B）\/BC瓦",
                        "15号（M536B）\/BC瓦",
                        "16号（M636B）\/BC瓦",
                        "17号（M535B）\/BE瓦",
                        "18号（M536B）\/BE瓦",
                        "19号（A5B）\/单B瓦",
                        "1号（A535B）\/BC瓦",
                        "20号（Q5B）\/单B瓦",
                        "21号（Q6B）\/单B瓦",
                        "22号（5B）\/E瓦",
                        "23号（6B）\/E瓦",
                        "24号（535B）\/BE瓦",
                        "25号（A5B）\/E瓦",
                        "26号（W5C）\/E瓦",
                        "27号（H7H）\/单B瓦",
                        "28号（636A）\/BE瓦",
                        "29号（6A）\/E瓦",
                        "2号（A536B）\/BC瓦",
                        "30号（B53）\/单E瓦",
                        "31号（B63）\/单E瓦",
                        "32号（M33）\/单B瓦",
                        "33号（B3C）\/单B瓦",
                        "34号（M3C）\/单B瓦",
                        "35号（B333C）\/BC瓦",
                        "36号（M3333）\/BC瓦",
                        "37号（M333C）\/BC瓦",
                        "3号（A636B）\/BC瓦",
                        "4号（A535B）\/BE瓦",
                        "5号（A536B）\/BE瓦",
                        "6号（A636B）\/BE瓦",
                        "7号（Q535B）\/BC瓦",
                        "8号（Q536B）\/BC瓦",
                        "9号（Q636B）\/BC瓦",
                        "38号（Q6B）\/单E层",
                        "39号（B33）\/单B瓦",
                        "40号（Q536B）\/BE瓦",
                        "小华6号(A+C一层加硬)",
                        "小华7号(A+C单B瓦)",
                        "小华6号(120gA+C \/BE)",
                        "43号（536B）\/BE瓦"
                    ],
                    "nameLocation": "end",
                    "zlevel": 0,
                    "axisLine": {
                        "show": true,
                        "lineStyle": {
                            "type": "solid"
                        },
                        "onZero": true
                    },
                    "name": ""
                }
            ],
            "tooltip": {
                "transitionDuration": 0.40000000000000002,
                "borderColor": "rgba(3,3,3,1.00)",
                "padding": 5,
                "axisPointer": {
                    "show": false,
                    "type": "shadow"
                },
                "position": "(function (p){return ['50%', p[1] - 10]} )",
                "islandFormmater": "{a} < br\/>{b} : {c}",
                "backgroundColor": "rgba(0,0,0,0.70)",
                "trigger": "axis",
                "show": true,
                "z": 8,
                "showContent": true,
                "showDelay": 20,
                "enterable": false,
                "hideDelay": 100,
                "borderWidth": 0,
                "zlevel": 1,
                "borderRadius": 4
            },
            "dataZoom": {
                "handleColor": "rgba(70,130,180,0.80)",
                "start": 0,
                "fillerColor": "rgba(144,197,237,0.20)",
                "dataBackgroundColor": "rgba(14,14,14,1.00)",
                "backgroundColor": "rgba(0,0,0,0.00)",
                "realtime": false,
                "show": false,
                "z": 4,
                "type": "inside",
                "minSpan": 5,
                "orient": "horizontal",
                "zlevel": 0,
                "handleSize": 8,
                "end": 100,
                "zoomLock": false,
                "showDetail": true
            },
            "title": {
                "padding": 5,
                "borderColor": "rgba(12,12,12,1.00)",
                "textStyle": {
                    "fontFamily": "Arial, Verdana, sans-serif",
                    "fontStyle": "normal",
                    "fontWeight": "bolder",
                    "decoration": "none",
                    "fontSize": 17
                },
                "subtextStyle": {
                    "fontFamily": "Arial, Verdana, sans-serif",
                    "fontSize": 12,
                    "fontStyle": "normal",
                    "fontWeight": "normal",
                    "decoration": "none",
                    "color": "rgba(10,10,10,1.00)"
                },
                "sublink": "",
                "x": "left",
                "backgroundColor": "rgba(0,0,0,0.00)",
                "y": "top",
                "link": "",
                "itemGap": 5,
                "show": true,
                "z": 0,
                "borderWidth": 0,
                "text": "",
                "subtext": "",
                "zlevel": 0
            },
            "animation": true,
            "toolbox": {
                "padding": 5,
                "borderColor": "rgba(12,12,12,1.00)",
                "disableColor": "rgba(13,13,13,0.00)",
                "x": "right",
                "backgroundColor": "rgba(0,0,0,0.00)",
                "effectiveColor": "rgba(255,0,0,1.00)",
                "y": "top",
                "itemSize": 16,
                "itemGap": 10,
                "show": false,
                "z": 6,
                "color": [
                    "rgba(30,144,255,1.00)",
                    "rgba(34,187,34,1.00)",
                    "rgba(75,0,130,1.00)",
                    "rgba(210,105,30,1.00)"
                ],
                "showTitle": true,
                "borderWidth": 0,
                "feature": {
                    "dataView": {
                        "title": "数据视图",
                        "show": false,
                        "readOnly": false,
                        "lang": [
                            "数据视图",
                            "关闭",
                            "刷新"
                        ]
                    },
                    "magicType": {
                        "show": false,
                        "title": {
                            "bar": "柱形图切换",
                            "chord": "和弦图切换",
                            "funnel": "漏斗图切换",
                            "force": "力导向布局图切换",
                            "tiled": "平铺",
                            "stack": "堆积",
                            "pie": "饼图切换",
                            "line": "折线图切换"
                        }
                    },
                    "mark": {
                        "show": false,
                        "title": {
                            "markClear": "清空辅助线",
                            "mark": "辅助线开关",
                            "markUndo": "删除辅助线"
                        },
                        "lineStyle": {
                            "color": "rgba(30,144,255,1.00)",
                            "type": "dashed",
                            "width": 2
                        }
                    },
                    "restore": {
                        "show": false,
                        "title": "还原"
                    },
                    "dataZoom": {
                        "show": true,
                        "title": {
                            "dataZoom": "区域缩放",
                            "dataZoomReset": "区域缩放后退"
                        }
                    }
                },
                "orient": "horizontal",
                "zlevel": 0
            },
            "yAxis": [
                {
                    "splitLine": {
                        "show": true,
                        "onGap": false,
                        "lineStyle": {
                            "type": "solid"
                        }
                    },
                    "scale": true,
                    "position": "'bottom'|'left'",
                    "show": true,
                    "z": 0,
                    "type": "value",
                    "data": [],
                    "nameLocation": "end",
                    "zlevel": 0,
                    "axisLine": {
                        "show": true,
                        "lineStyle": {
                            "type": "solid"
                        },
                        "onZero": true
                    },
                    "name": "㎡"
                },
                {
                    "splitLine": {
                        "show": true,
                        "onGap": false,
                        "lineStyle": {
                            "type": "solid"
                        }
                    },
                    "scale": true,
                    "position": "'bottom'|'left'",
                    "axisLabel": {
                        "formatter": "(function (params) {if(params >= 10000000) { return (params\/ 10000000 + '千万' );} if (params >= 10000) { return (params\/ 10000 + '万' );}  else {return params;}})",
                        "interval": "auto",
                        "show": true,
                        "clickable": false,
                        "rotate": 0,
                        "margin": 8
                    },
                    "show": true,
                    "z": 0,
                    "type": "value",
                    "data": [],
                    "nameLocation": "end",
                    "zlevel": 0,
                    "axisLine": {
                        "show": true,
                        "lineStyle": {
                            "type": "solid"
                        },
                        "onZero": true
                    },
                    "name": ""
                }
            ],
            "legend": {
                "borderColor": "#ccc",
                "textStyle": {
                    "fontFamily": "Arial, Verdana, sans-serif",
                    "fontSize": 12,
                    "fontStyle": "normal",
                    "fontWeight": "normal",
                    "decoration": "none",
                    "color": "rgba(3,3,3,1.00)"
                },
                "x": "center",
                "y": 29,
                "itemGap": 5,
                "show": true,
                "z": 4,
                "itemWidth": 20,
                "data": [
                    "51周",
                    "52周",
                    "1周",
                    "2周"
                ],
                "selectedMode": true,
                "orient": "horizontal",
                "itemHeight": 14
            }
        };

        var chart = testHelper.create(echarts, 'main2', {
            option: option,
            // recordCanvas: true
        });
    });

</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            "title": {
                "text": "option传入的title"
            },
            "tooltip": {
                "trigger": "axis"
            },
            "legend": {
                "data": ["邮件营销", "联盟广告"]
            },
            "grid": {
                "containLabel": true
            },
            "series": [{
                "type": "line",
                "stack": "all",
                "data": [120, 132, 101, 134, 90, 230, 210],
                "name": "邮件营销"
            }, {
                "type": "line",
                "stack": "all",
                "data": [220, 182, 191, 234, 290, 330, 310],
                "name": "联盟广告"
            }],
            "yAxis": {
                "type": "category",
                "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            },
            "xAxis": {
                "type": "value",
            },
            "toolbox": {
                "feature": {
                    "saveAsImage": {
                        "type": "jpeg",
                        "title": "保存保存"
                    },
                    "dataZoom": {
                        show: true
                    }
                }
            }
        };

        var chart = testHelper.create(echarts, 'main3', {
            option: option,
            // recordCanvas: true
        });
    });

</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            "xAxis": [{
                "type": "category",
                "name": "COLUMN_NAME",
                "gridIndex": 0
            }],
            "yAxis": [{
                "gridIndex": 0
            }],
            "series": [{
                "type": "bar",
                "stack": "COLUMN_NAME",
                "xAxisIndex": 0,
                "yAxisIndex": 0,
                "encode": {
                    "x": "COLUMN_NAME",
                    "y": "SUB_TYPE"
                }
            }, {
                "type": "bar",
                "stack": "COLUMN_NAME",
                "xAxisIndex": 0,
                "yAxisIndex": 0,
                "encode": {
                    "x": "COLUMN_NAME",
                    "y": "s1"
                }
            }],
            "brush": {
                "toolbox": ["rect", "polygon", "lineX", "lineY", "clear"],
                "throttleType": "debounce",
                "throttleDelay": 300
            },
            "toolbox": {
                "feature": {
                    "saveAsImage": {
                        "show": true
                    },
                    "dataZoom": {
                        "show": true
                    }
                },
                "show": true,
                "left": "40px"
            },
            "axisPointer": {
                "show": false
            },
            "tooltip": {
                "show": true
            },
            "color": ["#44bd89", "#4db7c8", "#eaad56", "#9fbd74", "#82cda4", "#ff942b", "#17988d", "#4e6783", "#bababa", "#bed38b", "#3eadb5", "#f75700", "#8f5989"],
            "dataset": {
                "source": [
                    ["COLUMN_NAME", "SUB_TYPE", "s1"],
                    ["column_name_0", 394, 394],
                    ["column_name_1", 426.5, 426.5],
                    ["column_name_2", 285, 285],
                    ["column_name_3", 404, 404],
                    ["column_name_4", 496.53846153846155, 496],
                    ["column_name_5", 244, 244],
                    ["column_name_6", 543, 543],
                    ["column_name_7", 528, 528],
                    ["column_name_8", 393, 393],
                    ["column_name_9", 539, 539]
                ],
                "dimensions": ["COLUMN_NAME", "SUB_TYPE", "s1"]
            },
            "grid": [{
                "left": "2%",
                "top": "8%",
                "width": "90%",
                "height": "90%",
                "containLabel": true
            }],
            "dataZoom": [{
                "type": "inside",
                "xAxisIndex": 0,
                "disabled": true
            }, {
                "type": "inside",
                "yAxisIndex": 0,
                "disabled": true
            }]
        }

        var chart = testHelper.create(echarts, 'main4', {
            option: option,
            // recordCanvas: true
        });
    });

</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                start: 0,
                end: 100,
                filterMode: 'filter',
            }, {
                type: 'inside',
                start: 0,
                end: 100,
                filterMode: 'filter',
            }],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        var chart = testHelper.create(echarts, 'main5', {
            option: option,
            // recordCanvas: true
        });
    });

</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '邮件营销',
                    type: 'bar',
                    stack: '广告',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'bar',
                    stack: '广告',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'bar',
                    stack: '广告',
                    data: [150, 232, 201, 154, 190, 330, 410]
                }],
            dataZoom: [
                {
                    show: true,
                    filterMode: 'filter',
                }
            ]
        };

        var chart = testHelper.create(echarts, 'main6', {
            option: option,
            // recordCanvas: true
        });
    });

</script>

</body>
</html>
